<template>
	<view class="member-select-page">

		<view class="headers">
			<!-- 项目信息 -->
			<view class="project-info">
				<view class="project-name">{{ buildingName }}</view>
				<view class="project-desc">{{ address }}</view>
			</view>
			<!-- 搜索框 -->
			<searchBar ref="searchBar" placeholder="请输入姓名" @input="searchConfirm"></searchBar>
			<!-- Tabs -->
			<!-- <view class="tabs">
				<view :class="['tab', activeTab === 0 ? 'active' : '']" @tap="tabChange(0)">附近人员</view>
				<view :class="['tab', activeTab === 1 ? 'active' : '']" @tap="tabChange(1)">附近保养人员</view>
				<view :class="['tab', activeTab === 2 ? 'active' : '']" @tap="tabChange(2)">附近居住</view>
			</view> -->

			<!-- <view class="filters">
				<view class="filters-title">
					人员列表
				</view>
				<view class="filters-btns">

					<view @click="showSort" :class="['btn-item', sortVal != 0 ? 'act' : '']">
						<image v-if="sortVal != 0" class="filter-icon" src="/static/images/rescue/sort_act.png" />
						<image v-else class="" src="/static/images/sort.png"></image> 排序
					</view>
					<view @click="showFilter" :class="['btn-item', hasFilter ? 'act' : '']">
						<image v-if="hasFilter" class="filter-icon" src="/static/images/rescue/filter_act.png" />
						<image v-else src="/static/images/filter.png"></image> 筛选
					</view>
				</view>

			</view> -->
		</view>
		<memberTree :tree="data" :expandedIds="expandedIds" @node-click="nodeClick" v-if="data.length"></memberTree>
		<!-- 人员列表 -->
		<!-- <scroll-view class="member-list" scroll-y>
			<view class="none-list" v-if="filterList.length == 0">
				<image
					src="https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/1Vy2FsPEZ5NNe3c51e39abfd3bbf1979dbf98f90936e.png">

				</image>
				<view>
					{{ ['未查询到附近人员', '未查询到附近保养人员', '未查询到附近居住人员'][activeTab] }}
				</view>
			</view>
			<view v-for="(member, idx) in filterList" :key="idx"
				:class="['member-card', selectedUserId.indexOf(member.userId) != -1 ? 'selected' : '']"
				@click="selectUser(member)">
				<radio :disabled="distanceUsers[member.userId]" class="radio" color="#0091FF"
					:checked="selectedUserId.indexOf(member.userId) != -1" /></label>
				<view class="card-header">
					<image class="avatar" :src="member.avatar" mode="aspectFill" />
					<view class="info">
						<view class="name-row">
							<text class="name">{{ member.realName }}</text>
							<text class="tag" v-if="member.skillName">{{ member.skillName }}</text>
							<image class="phone-icon" src="/static/images/call.png">

							</image>
							<text class="phone" @click.stop="callPhoneNumber(member.phone)">{{ member.phone }}</text>
						</view>
						<view class="status-row">
							<text :class="['loc-status']" :style="{ color: getRescueMsg(member.createTime).color }">{{
								getRescueMsg(member.createTime).desc }}</text>
						</view>
					</view>
				</view>
				<view class="card-body">
					<view><text class="label">预计行驶：</text>{{ member.travelTime }}分钟</view>
					<view><text class="label">直线距离：</text>{{ member.distance < 1000 ? member.distance + 'm' :
						(member.distance / 1000).toFixed(1) + 'km' }}</view>
							<view><text class="label">常用交通：</text>{{ member.vehicleName }}</view>
							<view><text class="label">交通半径：</text>{{ member.vehicleNum }}km</view>
					</view>
					<view class="card-tags">
						<view v-for="tag in member.tags" :key="tag.label" :class="['tag-label', tag.color]">
							<image v-if="tag.icon" class="phone-icon" :src="tag.icon"></image>
							{{ tag.label }}
						</view>
					</view>
				</view>
		</scroll-view> -->

		<!-- 底部按钮 -->
		<view class="footer-bar">
			<view @click="submit" :class="['submit-btn', selectedUserId.length == 0 ? 'disabled' : '']">确认并提交<text
					v-if="selectedUserId.length > 0">({{ selectedUserId.length }})</text>
			</view>
		</view>
		<selectDrawer title="排序" ref="selectDrawer" label-key="label" value-key="value" @confirm="sortConfirm">
		</selectDrawer>
		<filterDrawer ref="filterDrawer" @confirm="filerConfirm"></filterDrawer>
	</view>
</template>
<script>
import dayjs from 'dayjs';
import searchBar from './components/search-bar.vue';
import { getRescueUsers1, getRescueUsers2, getRescueUsers3, setRescueMember } from '@/apis/rescue.js';
import { getConfig } from '@/apis/sign.js';
import { rescueDetail } from '@/apis/elevator.js';
import selectDrawer from './components/select-drawer.vue';
import filterDrawer from './components/filter-drawer.vue';
import { getBuilding } from '@/apis/building.js';
import { getDistance } from '@/utils/tools.js';
import memberTree from '@/components/member-tree/tree-nodes.vue';
import {
	getDrivingDirection,
	getRransitDirection,
	getBicyclingDirection,
	getElectrobikeDirection,
} from '@/utils/amap-direction.js';
import { getAllMembers } from '@/apis/building.js';
export default {
	components: { searchBar, filterDrawer, selectDrawer, memberTree },
	data() {
		return {
			// 是否由创建页跳转 1 是
			tree: [],
			data: [],
			isCreate: 0,
			// 勾选的数据
			checkArr: [],
			// 用于点击打开子级
			expandedIds: [],
			filterData: {
				attendance: [],
				skill: [],
				sliderValue: 10,
				vehicle: [],
				workStatus: []
			},

			buildingId: '',
			buildingName: '',
			elevatorId: '',
			address: '',
			planId: '',
			selectedUserId: [],
			activeTab: 0,
			members: [

			],
			// 任务详情
			planDetail: {},
			// 人员列表
			users: [],
			distanceUsers: {},
			filterList: [],
			// 默认排序
			sortVal: 0,
			sortList: [{
				label: '区组时间短优先',
				value: 0
			}, {
				label: '区组距离短优先',
				value: 1
			}, {
				label: '时间短优先',
				value: 2
			}, {
				label: '距离短优先',
				value: 3
			}],
			buildingInfo: {},
			radarMap: {
				1: { key: 'bicycle', name: '自行车', fuc: getBicyclingDirection },
				2: { key: 'motorcycle', name: '摩托车', fuc: getDrivingDirection },
				3: {
					key: 'electricVehicle',
					name: '电动车',
					fuc: getElectrobikeDirection,
				},
				4: { key: 'car', name: '汽车', fuc: getDrivingDirection },
				5: { key: 'bus', name: '公交车', fuc: getRransitDirection },
				6: { key: 'other', name: '其他', fuc: getDrivingDirection },
			},
			setting: {
				rescueScreenConfig: null
			},
			// 新增缓存 map
			travelInfoMap: {},
		};
	},
	computed: {
		hasFilter() {
			let has = false;
			for (let key in this.filterData) {
				if (this.filterData[key] && this.filterData[key].length && key != 'sliderValue') {
					has = true;
					break;
				}
				if (key == 'sliderValue' && this.filterData[key] != 10) {
					has = true;
					break;
				}
			}
			return has;
		}
	},
	async onLoad(data) {
		this.buildingId = data.buildingId;
		this.buildingName = data.buildingName;
		this.elevatorId = data.elevatorId;
		this.address = data.address;
		this.planId = data.planId;
		this.isCreate = data.isCreate || 0;
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		// const setting = await getConfig();
		const rescue = await rescueDetail({ planId: this.planId });
		this.planDetail = rescue.data;
		this.users = rescue.data.planContentUsers || [];
		let distanceUsers = {};
		for (let i = 0; i < this.users.length; i++) {
			distanceUsers[this.users[i].userId] = this.users[i];
		}
		this.distanceUsers = distanceUsers;
		// uni.hideLoading();
		// await this.getBuildingInfo();
		// console.log(setting);
		// this.setting = setting.data;
		// this.getRescueUsers();

		getAllMembers().then(res => {
			this.tree = res.data;
			this.data = JSON.parse(JSON.stringify(this.tree));
			this.$nextTick(() => {
				uni.hideLoading();
			});
		});
	},
	methods: {
		// 点击每一项
		nodeClick(res) {
			let cindex = this.checkArr.findIndex(item => item.id === res.id);
			if (!res.children) {
				if (res.isOpen) {
					this.checkArr.push(res);
				} else {
					if (cindex != -1) {
						this.checkArr.splice(cindex, 1);
					}
				}
			}
			this.selectedUserId = this.checkArr.map(item => {
				return item.id;
			});
			// console.log('哈哈收拾收拾', this.checkArr, res.id);
			this.$forceUpdate();
		},

		getBuildingInfo() {
			return new Promise((resolve) => {
				if (!this.buildingId) {
					resolve();
					return;
				}
				getBuilding(this.buildingId).then(res => {
					this.buildingInfo = res.data || {};
					resolve();
				}).then(() => {
					resolve();
				});
			});
		},
		filerConfirm(res) {
			this.filterData = res;
			this.getRescueUsers();
			console.log(res);
		},

		sortConfirm(res) {
			console.log(res);
			this.sortVal = res.valueKey;
			this.filterFun();
		},
		showSort() {
			this.$refs.selectDrawer.open(this.sortList, this.sortVal);
		},

		showFilter() {
			this.$refs.filterDrawer.open(this.filterData);
		},
		submit() {
			if (this.selectedUserId.length == 0) {
				uni.showToast({
					title: '你还为选择人员',
					icon: 'none'
				});
				return;
			}
			uni.showLoading({
				title: '提交中',
				mask: true
			});

			setRescueMember({
				planId: this.planId,
				addType: 1,
				userIds: this.selectedUserId,
			}).then(() => {
				uni.hideLoading();
				uni.showToast({
					title: '调度成功',
					duration: 1000,
					mask: true
				});
				setTimeout(() => {
					if (this.isCreate == 1) {
						uni.redirectTo({
							url: '/subpages/rescue/rescueList?type=rescue&status=confirmed'
						});
					} else {
						uni.navigateBack();
					}
				}, 500);
			});
		},

		searchConfirm(res) {
			this.keywords = res;
			// this.filterFun();
			this.searchFuc(res);
		},

		// 搜索
		searchFuc(val) {
			// console.log('hahhahaha', val);
			// this.keywords = val;
			if (!val) {
				this.data = JSON.parse(JSON.stringify(this.tree));
			} else {
				this.expandedIds = [];
				this.data = this.filterTree(JSON.parse(JSON.stringify(this.tree)), val);
			}
		},

		// 关键词过滤
		filterTree(nodes, query) {
			// 条件就是节点的title过滤关键字
			let predicate = function (node) {
				// let strs = ''
				// if(node && node.title){
				// 	const reg = new RegExp(query,'g');
				// 	strs = node.title.replace(reg,`<text style="color: yellow">${query}</text>`)
				// 	console.log("进来了，，，",node,query,strs)
				// }
				return node.title.includes(query);
			};

			// 结束递归的条件
			if (!(nodes && nodes.length)) {
				return [];
			}
			let newChildren = [];
			for (let node of nodes) {
				if (node.children && node.children.length) {
					node.show = true;
				}

				// 一、带父节点     以下两个条件任何一个成立，当前节点都应该加入到新子节点集中
				// 1. 子孙节点中存在符合条件的，即 subs 数组中有值
				// 2. 自己本身符合条件
				let subs = this.filterTree(node.children, query);

				if (predicate(node)) {
					newChildren.push(node);
				} else if (subs && subs.length) {
					node.children = subs;
					newChildren.push(node);
					this.expandedIds.push(node.id);
				}

				// 二、不带父节点     以下只需要考虑自身的节点满足条件即可,不用带上父节点
				// if (predicate(node)) {
				// 	newChildren.push(node);
				// 	node.children = this.filterTree(node.children, query);
				// } else {
				// 	newChildren.push(...this.filterTree(node.children, query));
				// }
			}
			return newChildren.length ? newChildren : [];
		},

		// 筛选数据
		filterFun() {
			let tags = [...this.filterData.attendance, ...this.filterData.workStatus];
			let list = [];
			if (this.keywords || tags.length || this.filterData.skill.length || this.filterData.vehicle.length) {
				list = this.members.filter(item => {
					let name = true;
					let tag = true;
					let skill = true;
					let vehicle = true;
					if (this.keywords) {
						name = (item.realName.indexOf(this.keywords) != -1);
					}

					if (tags.length) {
						const itemTags = (item.tags || []).map(t => t.label);
						// 判断 tags 与 itemTags 是否有交集
						tag = tags.some(tagItem => itemTags.includes(tagItem));
					}

					if (this.filterData.skill.length) {
						skill = (this.filterData.skill.indexOf(item.skillKey) != -1);
					}

					if (this.filterData.vehicle.length) {
						vehicle = (this.filterData.vehicle.indexOf(item.vehicleKey) != -1);
					}

					console.log(name, tag, skill, vehicle);

					return name && tag && skill && vehicle;
				});
			} else {
				list = JSON.parse(JSON.stringify(this.members));
			}

			// 根据 sortVal 排序
			switch (this.sortVal) {
			case 0:
				// 区组时间短优先，elevatorGroupUser=true优先 
				list.sort((a, b) => {
					// 先按elevatorGroupUser优先
					if ((b.elevatorGroupUser === true ? 1 : 0) !== (a.elevatorGroupUser === true ? 1 : 0)) {
						return (b.elevatorGroupUser === true ? 1 : 0) - (a.elevatorGroupUser === true ? 1 : 0);
					}
					// 再按travelTime
					return (a.travelTime || 0) - (b.travelTime || 0);
				});
				break;
			case 1:
				// 区组距离短优先，elevatorGroupUser=true优先

				list.sort((a, b) => {
					// 先按elevatorGroupUser优先
					if ((b.elevatorGroupUser === true ? 1 : 0) !== (a.elevatorGroupUser === true ? 1 : 0)) {
						return (b.elevatorGroupUser === true ? 1 : 0) - (a.elevatorGroupUser === true ? 1 : 0);
					}
					// 再按distance
					return (a.distance || 0) - (b.distance || 0);
				});
				break;
			case 2:
				// 时间短优先
				list.sort((a, b) => (a.travelTime || 0) - (b.travelTime || 0));
				break;
			case 3:
				// 距离短优先
				list.sort((a, b) => (b.distance || 0) - (a.distance || 0));
				break;
			default:
				// 不排序
				break;
			}

			this.filterList = list;
		},
		tabChange(tab) {
			this.activeTab = tab;
			this.getRescueUsers();
		},
		// 数获取颜色
		getRescueMsg(date) {
			if (!date) {
				return;
			}
			let noewDate = dayjs(new Date()).format('YYYY-MM-DD');
			let min = dayjs(new Date()).diff(dayjs(date), 'minute');
			let hour = dayjs(new Date()).diff(dayjs(date), 'hour');
			// 计算天只需要计算自然日
			let day = dayjs(noewDate).diff(dayjs(date.slice(0, 10)), 'day');
			let isSameDay = noewDate == date.slice(0, 10) ? true : false;
			let obj = {};
			// console.log(min,hour,day,isSameDay,date,name, dayjs(new Date()).diff(dayjs(date),"minute"));
			// 如果是同一天,判断是否大于6小时
			if (isSameDay) {
				if (min <= 1) {
					(obj.desc = '刚刚上报定位'), (obj.color = '#52c41a');
				} else if (min > 1 && min <= 30) {
					(obj.desc = `${min}分钟前最后上报定位`), (obj.color = '#52c41a');
				} else if (min > 30 && min <= 60) {
					(obj.desc = `${min}分钟前最后上报定位`), (obj.color = '#0091ff');
				} else if (min > 60) {
					(obj.desc = `${hour}小时前最后上报定位`), (obj.color = '#faad14');
				}
			} else {
				// 如果相隔一天且时间大于6小时判断为昨天
				if (day == 1 && hour > 6) {
					(obj.desc = '昨天最后上报定位'), (obj.color = '#999');
				}
				// 如果跨1天且小于6小时走当天逻辑
				if (day == 1 && hour <= 6) {
					if (min <= 1) {
						(obj.desc = '刚刚上报定位'), (obj.color = '#52c41a');
					} else if (min > 1 && min <= 30) {
						(obj.desc = `${min}分钟前最后上报定位`), (obj.color = '#52c41a');
					} else if (min > 30 && min <= 60) {
						(obj.desc = `${min}分钟前最后上报定位`), (obj.color = '#0091ff');
					} else if (min > 60) {
						(obj.desc = `${hour}小时前最后上报定位`), (obj.color = '#faad14');
					}
				}
				// 大于1天
				if (day > 1) {
					(obj.desc = `${day}天前最后上报定位`), (obj.color = '#999');
				}
			}
			// 先判断是否是同一天

			return obj;
		},
		selectUser(item) {
			if (this.distanceUsers[item.userId]) {
				uni.showToast({
					title: '该人员已在任务中，请勿重复指派',
					icon: 'none'
				});
				return;
			}
			const idx = this.selectedUserId.indexOf(item.userId);
			if (idx == -1) {
				this.selectedUserId.push(item.userId);
			} else {
				this.selectedUserId.splice(idx, 1);
			}
		},

		// 渲染交通半径
		async setRadius(item) {
			const userId = item.userId;
			if (this.travelInfoMap[userId]) {
				const cache = this.travelInfoMap[userId];
				item.travelTime = cache.travelTime;
				item.path = cache.path;
				item.diameter = cache.diameter;
				item.diameterNum = cache.diameterNum;
				item.vehicleNum = cache.vehicleNum;
				item.vehicleName = cache.vehicleName;
				item.vehicleKey = cache.vehicleKey;
				return;
			}

			const radarMap = this.radarMap;
			let type = radarMap[item.vehicle || '6'];
			item.vehicleName = type.name;
			item.vehicleKey = type.key;
			let pathFuc = type.fuc;
			const org = [item.longitude, item.latitude];
			const build = [item.residentialLongitude, item.residentialLatitude];
			let distance = Number(item.distance || 0);
			if (!distance) {
				distance = getDistance(...org, ...build, false);
			}
			if (distance >= 1000) {
				item.diameter = (distance / 1000).toFixed(1) + '公里';
			} else {
				item.diameter = distance + '米';
			}
			item.diameterNum = distance;
			// if (this.setting.rescueScreenConfig) {
			// 	item.vehicleNum = this.setting.rescueScreenConfig[type.key];
			// }

			item.travelTime = 1;

			return new Promise((resolve) => {
				pathFuc(org, build)
					.then((res) => {
						let path = null;
						if (res.route) {
							if (res.route.paths) {
								path = res.route.paths[0];
								item.travelTime = (path.duration / 60).toFixed(0);
								item.path = path;
							}
							if (res.route.transits && res.route.transits.length) {
								path = res.route.transits[0];
								item.travelTime = (path.duration / 60).toFixed(0);
								item.path = path;
							}
						}

						if (res.paths && res.paths.length) {
							path = res.paths[0];
							item.travelTime = Math.ceil(path.duration / 60);
							item.path = path;
						}
						if (!item.travelTime) {
							item.travelTime = 1;
						}

						// 缓存结果
						this.travelInfoMap[userId] = {
							travelTime: item.travelTime,
							path: item.path,
							diameter: item.diameter,
							diameterNum: item.diameterNum,
							vehicleNum: item.vehicleNum,
							vehicleName: item.vehicleName,
							vehicleKey: item.vehicleKey
						};
						resolve();
					})
					.catch(() => {
						item.travelTime = 1;
						// 缓存失败结果
						this.travelInfoMap[userId] = {
							travelTime: item.travelTime,
							path: null,
							diameter: item.diameter,
							diameterNum: item.diameterNum,
							vehicleNum: item.vehicleNum,
							vehicleName: item.vehicleName,
							vehicleKey: item.vehicleKey
						};
						resolve();
					});
			});
		},
		getRescueUsers() {
			uni.showLoading({
				title: '加载中',
			});
			const funs = [getRescueUsers1, getRescueUsers2, getRescueUsers3];
			let userFuc = funs[this.activeTab];
			this.selectedUserId = [];
			this.keywords = '';
			this.$refs.searchBar.clear();
			userFuc({
				buildingId: this.buildingId,
				elevatorId: this.elevatorId,
				distance: (this.filterData.sliderValue == 60 || this.filterData.sliderValue == 0) ? 1000000 : (this.filterData.sliderValue * 1000)
			}).then(async res => {
				let list = res.data || [];
				for (let i = 0; i < list.length; i++) {
					list[i].travelTime = 1;
					await this.setRadius(list[i]);
					const member = list[i];
					member.tags = [];
					member.distance = member.distance || 0;

					// 今日出勤/未出勤
					if (member.isSign) {
						member.tags.push({ label: '今日已出勤', color: 'green', icon: '/static/images/signed.png' });
					} else {
						member.tags.push({ label: '今日未出勤', color: 'gray', icon: '/static/images/signed_df.png' });
					}

					// 空闲
					if (!member.planTypes || member.planTypes.length == 0) {
						member.tags.push({ label: '空闲', color: 'green' });
					}
					// 保养作业中
					if (member.planTypes && member.planTypes.indexOf(1) != -1) {
						member.tags.push({ label: '保养作业中', color: 'yellow' });
					}
					// 维修作业中
					if (member.planTypes && member.planTypes.indexOf(2) != -1) {
						member.tags.push({ label: '维修作业中', color: 'blue' });
					}
					// 救援作业中
					if (member.planTypes && member.planTypes.indexOf(3) != -1) {
						member.tags.push({ label: '救援作业中', color: 'red' });
					}
				}
				list.sort((a, b) => {
					return a.distance > b.distance ? 1 : -1;
				});
				console.log('list', list);
				this.members = list;
				this.filterFun();
				this.$nextTick(() => {
					uni.hideLoading();
				});
			});
		},

		callPhoneNumber(phone) {
			if (phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			} else {
				uni.showToast({
					title: '无效的电话号码',
					icon: 'none'
				});
			}
		},
	}
};
</script>
<style lang="scss" scoped>
.none-list {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-style: 26rpx;
	color: #999;
	padding: 32rpx 0;
	padding-top: 12%;

	image {
		width: 64rpx;
		height: 64rpx;
		margin-bottom: 10rpx;
	}
}

.member-select-page {
	background: #F3F6F8;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.project-info {
	background: #2c2c2c;
	color: #fff;
	padding: 40rpx 20rpx;

	.project-name {
		font-size: 36rpx;
		font-weight: bold;
	}

	.project-desc {
		font-size: 26rpx;
		color: #e5e5e5;
		margin-top: 8rpx;
	}
}

.headers {
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 99;
	background-color: #fff;
}

.search-bar {
	background: #fff;
	padding: 20rpx 32rpx;

	.search-input {
		width: 100%;
		border: none;
		background: #f2f3f5;
		border-radius: 16rpx;
		padding: 20rpx;
		font-size: 32rpx;
		outline: none;
	}
}

.filters {
	// width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #F3F6F8;
	font-size: 26rpx;
	color: #333;
	padding: 18rpx 20rpx;

	&-title {
		color: #666;
	}

	&-btns {
		display: flex;
		align-items: center;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 4rpx;
		}

		.btn-item {
			margin-left: 20rpx;
			display: flex;
			align-items: center;

		}

		.act {
			color: #0091FF;
		}
	}

}

.tabs {
	display: flex;
	flex-direction: row;
	align-items: center;
	background: #fff;
	padding: 0 24rpx;
	border-bottom: none;
	margin-top: 16rpx;
	padding-bottom: 22rpx;

	.tab {
		padding: 0 18rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 28rpx;
		color: #666;
		background: #f5f6f7;
		border-radius: 2rem;
		margin-right: 20rpx;
		font-weight: normal;
		transition: all 0.2s;

		&.active {
			background: #e6f3ff;
			color: #0091FF;
			font-weight: normal;
		}
	}
}

.member-list {
	flex: 1;
	//   height: 100vh;
	overflow-y: auto;
	padding: 0rpx 16rpx 160rpx 16rpx;
}

.member-card {
	width: 660rpx;
	background: #fff;
	border-radius: 18rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
	margin-bottom: 32rpx;
	padding: 24rpx 24rpx 16rpx 24rpx;
	border: 2rpx solid transparent;
	font-size: 28rpx;
	color: #333;
	position: relative;
	transition: .3s all;

	&.selected {
		border-color: #0091FF;
	}

	.radio {
		pointer-events: none;
		position: absolute;
		top: 22rpx;
		right: 10rpx;
		z-index: 9;
	}

	.card-header {
		display: flex;
		align-items: flex-start;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			object-fit: cover;
		}

		.info {
			flex: 1;

			.name-row {
				display: flex;
				align-items: center;

				.name {
					font-weight: bold;
					margin-right: 12rpx;
				}

				.tag {
					background: #e6f0ff;
					color: #0091FF;
					border-radius: 8rpx;
					padding: 4rpx 12rpx;
					font-size: 24rpx;
					margin-right: 16rpx;
				}

				.phone-icon {
					width: 40rpx;
					height: 40rpx;
				}

				.phone {
					color: #0091FF;
				}
			}

			.status-row {
				margin-top: 4rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;

				.loc-status {
					margin-right: 16rpx;
				}

				.green {
					color: #52c41a;
				}

				.red {
					color: #ff4d4f;
				}

				.blue {
					color: #0091FF;
				}

				.orange {
					color: #faad14;
				}

				.gray {
					color: #aaa;
				}

				.selected-icon {
					color: #0091FF;
					font-size: 36rpx;
				}

				.unselected-icon {
					color: #ccc;
				}
			}
		}
	}

	.card-body {
		margin-top: 16rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 1.7;

		.label {
			color: #999;
		}
	}

	.card-tags {
		margin-top: 16rpx;

		.tag-label {
			display: inline-block;
			font-size: 24rpx;
			border-radius: 8rpx;
			padding: 4rpx 16rpx;
			margin-right: 12rpx;
			margin-bottom: 4rpx;

			image {
				width: 20rpx;
				height: 20rpx;
				margin-right: 4rpx;
			}

			&.green {
				background: #e6f7e5;
				color: #52c41a;
			}

			&.yellow {
				background: #fffbe6;
				color: #faad14;
			}

			&.blue {
				background: #e6f0ff;
				color: #0091FF;
			}

			&.red {
				background: #fff1f0;
				color: #ff4d4f;
			}

			&.gray {
				background: #f5f5f5;
				color: #aaa;
			}

			&.lightgreen {
				background: #f6ffed;
				color: #52c41a;
			}
		}
	}
}

.member-card:first-child {
	margin-top: 0;
}

.footer-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	padding: 24rpx 32rpx;

	.submit-btn {
		width: 100%;
		background: #0091FF;
		color: #fff;
		font-size: 28rpx;
		border: none;
		border-radius: 8rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		transition: .3s all;
	}

	.disabled {
		background: #EFEFEF;
		color: #ccc;
	}
}

.user-disabled {
	background-color: #ccc;
}
</style>